{extend name="layout/base"}

{block name="content"}
<div style="margin-bottom: 64px;">
    <form class="layui-form" lay-filter="first">
        <div class="layui-container">
            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <div class="layui-input-block">
                    <div>
                        <input type="hidden" name="s_id" value="{$SiteInfo.s_id}" id="id"/>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">网站名称：</label>
                <div class="layui-input-block">

                    <input type="text" class="layui-input" name="s_name" id="name" value="{$SiteInfo.s_name}"
                           lay-verify="required"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">介绍：</label>
                <div class="layui-input-block">
                    <textarea name="s_introduction" rows="5"
                              class="layui-textarea">{$SiteInfo.s_introduction}</textarea>
                </div>
            </div>
            <div class="layui-form-item imgline">
                {php}$s_banner =$images = explode(',',$SiteInfo['s_banner']);
                if($SiteInfo['s_banner']==""||$SiteInfo['s_banner']==NULL){
                echo '
                <div class="layui-form-item imgline layui-hide">';
                    }else{
                    echo '
                    <div class="layui-form-item imgline">';
                        }
                        {/php}
                        <label class="layui-form-label">图片</label>
                        <div class="layui-input-block imglist">
                            {foreach $s_banner as $vo }
                            <div class="imglist_div">
                                <img src="{$vo}" alt="">
                                <span class="imglist_close" onclick="delimg(this)"><i
                                        class="layui-icon layui-icon-close-fill"></i></span>
                            </div>
                            {/foreach}
                        </div>
                    </div>
                    {php} if(count($s_banner)==3){
                    echo '
                    <div class="layui-form-item layui-hide">';
                        }else{
                        echo '
                        <div class="layui-form-item">';
                            }
                            {/php}
                            <label class="layui-form-label">图片</label>
                            <div class="layui-input-block">
                                <div id="uploader">
                                    <div id="filePicker">选择图片</div>
                                </div>
                                <div class="statusBar">
                                    <div id="fileList" class="uploader-list"></div>
                                    <div class="webuploadBtn">
                                        <div class="info"></div>
                                        <div class="layui-btn layui-btn-normal btn" id="submitupload">开始上传</div>
                                        <div id="filePicker2" class="layui-btn layui-btn-normal btn"></div>
                                        <div class="clear"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">关键字：</label>
                            <div class="layui-input-block">
                                <div>
                                    <input type="text" class="layui-input" name="s_keyword" id="keyword"
                                           value="{$SiteInfo.s_keyword}" lay-verify="required"/>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">联系电话：</label>
                            <div class="layui-input-block">
                                <div>
                                    <input type="text" class="layui-input" name="s_phone" id="tel"
                                           value="{$SiteInfo.s_phone}" lay-verify="required"/>
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">ICP备案号：</label>
                            <div class="layui-input-block">
                                <div>
                                    <input type="text" class="layui-input" name="s_icp" id="icp"
                                           value="{$SiteInfo.s_icp}"
                                           lay-verify="required"/>
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">公司地址：</label>
                            <div class="layui-input-block">
                                <div>
                                    <input type="text" class="layui-input" name="s_address" id="address"
                                           value="{$SiteInfo.s_address}" lay-verify="required"/>
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">网站开关：</label>
                            <div class="layui-input-block">
                                <div>
                                    <input type="checkbox" name="s_status" lay-skin="switch" lay-filter="switchstatus"
                                           value="{$SiteInfo.s_status}" lay-text="开启|关闭" {switch $SiteInfo.s_status}
                                           {case 2}checked{/case}
                                    {case -1}{/case}
                                    {/switch}>
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">地图图标：</label>
                            <div class="layui-input-inline" style="width: 80%;border: 1px solid #c9c9c9">
                                <div id="container" style="min-width:400px;min-height:300px;"></div>
                                <input type="text" name="s_latitude" value="{$SiteInfo.s_latitude}"
                                       class="layui-input layui-hide">
                                <input type="text" name="s_longitude" value="{$SiteInfo.s_longitude}"
                                       class="layui-input layui-hide">
                            </div>
                        </div>
                        <div style="clear:both"></div>
                        <div class="layui-form-item">
                            <div class="layui-input-inline" style="margin-left: 100px">
                                <button class="layui-btn  layui-text-center" lay-submit lay-filter="submit">提交</button>
                            </div>
                        </div>
                    </div>
    </form>
</div>
<script src="/static/js/jquery.min.js"></script>
<script src="/static/webuploader-0.1.5/webuploader.js"></script>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=5UIBZ-OLR33-WKJ3S-YGJW2-EKB2F-XDB6B"></script>
<script>
    layui.use(['jquery', 'form', 'layer', 'upload'], function () {
        var form = layui.form,
            $ = layui.jquery,
            layer=layui.layer;
        $('.statusBar').hide()
        /*百度上传图片*/
        var uploader = WebUploader.create({
            duplicate: true,
            auto: false,
            swf: '/static/webuploader-0.1.5/Uploader.swf',
            server: "uploads",
            pick: "#filePicker",
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/jpg,image/jpeg,image/png',
            },
            threads: 1,   //线程数          
            fileSingleSizeLimit: 2 * 1024 * 1024,//单个文件大小限制
            fileNumLimit: 3,//上传文件数量限制
            compress: false,//上传前不压缩
        });
        var flag = true

        //当有一批文件加载进队列时触发事件
        var fileCount = 0, fileSize = 0, text = '';
        uploader.on("fileQueued", function (file) {
            $('.statusBar').show()
            var $list = $("#fileList")
            var $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail">' +
                '<img>' +
                '<div class="infos" >' + file.name + '</div>' +
                '<div class="file-panel">' +
                '<span class="cancel" style="color:red;font-size:12px"><i class="layui-icon layui-icon-close-fill"></i></span>' +
                '</div>' +
                '</div>'
                ),
                $img = $li.find('img');
            $list.append($li);
            $('#filePicker').css('display', 'none')
            uploader.addButton({
                id: '#filePicker2',
                label: '继续添加'
            });

            // 创建缩略图
            uploader.makeThumb(file, function (error, src) {
                if (error) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }
                $img.attr('src', src);
            }, 100, 100);
            //统计图片数
            fileCount++;
            fileSize += file.size;
            text = '选中' + fileCount + '张图片，共' + WebUploader.formatSize(fileSize) + '(最多可选3张)。';
            $(".statusBar .info").html(text)
            // 删除按钮
            $('.cancel').click(function () {
                var isTrue = $(this).parents('.file-item').find('.success'),
                    $this = $(this)
                if (!isTrue.length) {
                    var id = $this.parents('.file-item').attr('id');
                    uploader.removeFile(id, true)
                    $this.parents('.file-item').remove()
                    fileCount--;
                    if (fileCount == 0) {
                        $('#filePicker').css('display', 'block')
                        $('.statusBar').css('display', 'none')
                    }
                    fileSize -= file.size;
                    text = '选中' + fileCount + '张图片，共' + WebUploader.formatSize(fileSize) + '。';
                    $(".statusBar .info").html(text)
                } else {
                    var imgsrc = $this.parents('.file-item').find('.imgpath').data('src')
                    $.ajax({
                        type: "post",
                        url: 'delfile',
                        data: {
                            path: imgsrc
                        },
                        dataType: 'json',
                        beforeSend: function (res) {
                            index = layer.load(2);
                        },
                        success: function (res) {
                            if (res.code == 0) {
                                layer.close(index);
                                var id = $this.parents('.file-item').attr('id');
                                uploader.removeFile(id, true)
                                $this.parents('.file-item').remove()
                                fileCount--;
                                if (fileCount == 0) {
                                    $('#filePicker').css('display', 'block')
                                    $('.statusBar').css('display', 'none')
                                }
                                fileSize -= file.size;
                                text = '选中' + fileCount + '张图片，共' + WebUploader.formatSize(fileSize) + '。';
                                $(".statusBar .info").html(text)
                            } else {
                                layer.msg(res.msg, {time: 2000, icon: 5});
                                layer.close(index);
                            }

                        },
                        error: function (res) {
                            layer.close(index);
                        }
                    })
                }

            })
        });
        $('#submitupload').click(function () {
            uploader.upload()
        })
        uploader.on('uploadProgress', function (file, percentage) {
            var $li = $('#' + file.id)
            var $percent = $li.find('.layui-progress');
            // 避免重复创建
            if ($percent.length <= 0) {
                $percent = $('<div class="layui-progress"><span class="data"></span></br>' + '<div class="layui-progress-bar"></div>' + '</div>').appendTo($li)
            }
            $li.find('.layui-progress').find('.layui-progress-bar').css('width', percentage * 100 + '%');
        });
        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on('uploadSuccess', function (file, response) {
            var $li = $('#' + file.id),
                $success = $li.find('div.success');

            // 避免重复创建
            if (!$success.length) {
                $success = $('<div class="success"></div>').appendTo($li);
            }
            $success.text('上传成功');
            $('<div class="imgpath" data-src=' + response.data.filepath + '></div>').appendTo($li)
        });

        // 文件上传失败，显示上传出错。
        uploader.on('uploadError', function (file) {
            var $li = $('#' + file.id),
                $error = $li.find('div.error');

            // 避免重复创建
            if (!$error.length) {
                $error = $('<div class="error"></div>').appendTo($li);
            }

            $error.text('上传失败');
        });

        // 完成上传完了，成功或者失败，先删除进度条。
        uploader.on('uploadComplete', function (file) {
            $('#' + file.id).find('.layui-progress').remove();
        });
        // 地图
        var lat = $("input[name='s_latitude']").val()
        var long = $("input[name='s_longitude']").val()
        var markersArray = []
        var flg = 0;
        var map = new qq.maps.Map(document.getElementById("container"), {
            // 地图的中心地理坐标。
            center: new qq.maps.LatLng(40.8064033900658, 111.64924621582035),
            zoom: 11,
            draggableCursor: 'crosshair'
        });
        var marker = new qq.maps.Marker({
            //设置Marker的位置坐标
            position: new qq.maps.LatLng(lat, long),
            //设置显示Marker的地图
            map: map
        });
        flg = 1
        markersArray.push(marker)
        qq.maps.event.addListener(map, 'click', function (event) {
            var lat = event.latLng.getLat(), long = event.latLng.getLng();
            if (flg > 0) {
                for (i in markersArray) {
                    markersArray[i].setMap(null);
                }
            }
            marker = new qq.maps.Marker({
                position: new qq.maps.LatLng(lat, long),
                map: map
            });
            markersArray.push(marker)
            form.val('first', {
                's_latitude': lat,
                's_longitude': long
            });
            flg++;
        });
        form.on('submit(submit)', function (data) {
            $.ajax({
                type: 'post',
                url: 'setInfo',
                data: data.field,
                success: function (res) {
                    if (res.code == 0) {
                        layer.msg(res.msg);
                        window.location.reload()
                    } else {
                        layer.msg(res.msg)
                    }
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //图片删除
        window.delimg = function (obj) {
            var that = obj,
                $this = $(that),
                imgsrc = $this.prev('img').attr('src')
            $.ajax({
                type: "post",
                url: 'delfile',
                data: {
                    path: imgsrc
                },
                dataType: 'json',
                beforeSend: function (res) {
                    index = layer.load(2);
                },
                success: function (res) {
                    if (res.code == 0) {
                        layer.close(index);
                        $this.parents('.imglist_div').remove()
                        layer.msg(res.msg, {time: 1000, icon: 6});
                        var $img = $this.parents('.imglist').find('.imglist_div')
                        if (!$img.length) {
                            $this.parents('.imgline').remove()
                        }
                    } else {
                        layer.msg(res.msg, {time: 2000, icon: 5});
                        layer.close(index);
                    }

                },
                error: function (res) {
                    layer.close(index);
                }
            })
        }

    });

</script>
{/block}